import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, VisualMapComponent, TooltipComponent, TitleComponent, VisualMapPiecewiseComponent, VisualMapContinuousComponent, DatasetComponent } from 'echarts/components';
import { SVGRenderer, SvgChart } from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window')

echarts.use([SVGRenderer, GridComponent, BarChart, VisualMapComponent, VisualMapPiecewiseComponent, VisualMapContinuousComponent, TooltipComponent, TitleComponent, DatasetComponent]);

export default function Verticalbar(props) {
    const skiaRef = useRef(null);
    useEffect(() => {
        const option = {
            dataset: {
                source: props.series
            },
            grid: { containLabel: true },
            xAxis: { name: 'amount' },
            yAxis: { type: 'category' },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        let chart;
        if (skiaRef.current) {
            chart = echarts.init(skiaRef.current, 'light', {
                renderer: 'svg',
                width: width - 34,
                height: width - 34,
            });
            chart.setOption(option);
        }
        return () => chart?.dispose();
    }, []);

    // return <SkiaChart ref={skiaRef} />;
    return <SvgChart ref={skiaRef} />;
}